
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>AI视频笔记 BiliNote - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>AI视频笔记 BiliNote - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">BiliNote的目标用户群体有哪些？他们面临的主要痛点是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">目标用户群体包括学生、研究人员和内容创作者。他们面临的主要痛点是：视频内容丰富但边看边记会导致分心，容易遗漏重要细节；长视频处理起来尤其繁琐，笔记往往零散、不易回顾；跨平台视频笔记缺乏统一工具，增加了切换成本。</div>
          </div>
          <div class="card-source">来源: 文档中「BiliNote是一个AI驱动的视频笔记生成工具」和「它能解决什么问题」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">BiliNote支持哪些视频平台？这种多平台支持的优势是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">BiliNote支持Bilibili、YouTube、抖音以及本地视频文件。优势在于用户无需切换工具即可处理不同来源的内容，大大提高了笔记生成的灵活性，尤其适合跨平台学习者。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能概述」的「多平台视频支持」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">BiliNote使用了哪些AI技术来实现视频内容分析和音频转录？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">BiliNote使用GPT模型分析视频，提取核心要点并输出结构化Markdown笔记。在音频转录方面，集成了Fast-Whisper进行语音识别，支持可选CUDA加速。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能概述」的「AI内容总结与Markdown生成」和「本地音频转录」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">BiliNote生成的Markdown笔记包含哪些特殊功能？这些功能如何提升实用性？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">生成的Markdown笔记包括时间戳链接，便于快速定位视频片段。这个功能的实用性在于节省手动提炼时间，用户可以直接点击时间戳跳转到视频的特定位置。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能概述」的「AI内容总结与Markdown生成」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">应用</div>
          <div class="card-question">对于大学生观看编程教程视频，BiliNote能提供什么具体帮助？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">应用</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">BiliNote能自动生成带代码片段和时间链接的笔记，帮助快速复习难点，避免手动暂停记述的低效。这将笔记时间从小时级缩短到分钟级。</div>
          </div>
          <div class="card-source">来源: 文档中「使用场景」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">BiliNote相比Notion和Obsidian等工具的独特优势是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">BiliNote的独特之处在于其专为视频AI处理设计的深度集成：它不只是存储笔记，而是从源头自动化提取和格式化，支持Bilibili等本土平台的无缝接入，这在国际工具中较为少见。本地转录功能进一步降低了云依赖风险，提供隐私和速度优势。</div>
          </div>
          <div class="card-source">来源: 文档中「优势与特色」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">限制</div>
          <div class="card-question">BiliNote当前存在哪些主要限制和不足？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">限制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当前web版本速度较慢，不适合超长视频（超过1小时可能需本地部署），且依赖FFmpeg等外部依赖安装，可能增加初次设置门槛。Windows版需避免中文路径环境，否则可能出错。</div>
          </div>
          <div class="card-source">来源: 文档中「优势与特色」和「使用门槛与成本」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">成本</div>
          <div class="card-question">使用BiliNote需要付费吗？可能产生的成本有哪些？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">成本</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">BiliNote完全免费且开源，无需注册账号即可使用核心功能。高级版本暂无，但API调用（如GPT模型）可能产生外部成本，视用户选择模型而定。本地Fast-Whisper是免费的。</div>
          </div>
          <div class="card-source">来源: 文档中「使用门槛与成本」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">部署BiliNote需要哪些技术环境和依赖？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">需要Python 3.8+、Node.js和FFmpeg。部署需基本编程环境，但提供Windows可执行文件简化过程。总体门槛中等：技术用户可轻松自建，非技术用户可试用web版。</div>
          </div>
          <div class="card-source">来源: 文档中「使用门槛与成本」和「上手指南」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">操作</div>
          <div class="card-question">如何配置BiliNote的后端服务？需要哪些步骤？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">操作</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">进入backend目录运行cd backend，然后运行pip install -r requirements.txt安装依赖。启动服务器使用python main.py命令（默认端口8000）。需要先复制环境文件cp .env.example .env，并编辑.env设置OpenAI API密钥（若用云模型）。</div>
          </div>
          <div class="card-source">来源: 文档中「上手指南」的步骤1和2</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">优化</div>
          <div class="card-question">如何优化BiliNote的音频转录速度？需要什么硬件支持？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">优化</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">若有NVIDIA GPU，可以配置CUDA加速：在requirements中安装faster-whisper[cuda]，重启后端以提升转录速度。这是一个可选优化，能显著提高处理长视频时的性能。</div>
          </div>
          <div class="card-source">来源: 文档中「上手指南」的「可选优化」部分</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">功能</div>
          <div class="card-question">BiliNote的任务历史管理功能有什么作用？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">功能</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">任务历史管理功能自动保存笔记版本，支持回顾和比较历史记录，避免重复工作并便于长期知识积累。</div>
          </div>
          <div class="card-source">来源: 文档中「核心功能概述」的「任务历史管理」部分</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
